<!--
* 功能-页面实现
* Date: 2023-8-05
* Author: jincongyi
 -->

<template>
  <div style="position: relative">
    <transition-group name="hello">
      <div v-show="visible" class="drawer drawerLeft" key="1">
        <div class="title">
          <span>数据筛选</span>
        </div>
        <div class="content">
          <FilterBar
            v-model="search"
            ref="FilterRef"
            :close-collapse="true"
            :hasButton="true"
            :filters="visualOptions"
            @search-change="findPage"
            @search-reset="reset"
            @on-toggle="(val: any)=>$emit('on-toggle',val)"
          />
        </div>
        <div class="title" style="margin-top: 50px">
          <span>信息列表</span>
          <table-common
            stripe
            :columns="visualColumns"
            :loading="loading"
            :pagination="pager"
            :table-data="tableData"
            :highlight-current-row="isHighLight"
            height="450"
            @row-click="rowClick"
            @current-change="currentChange"
            @size-change="sizeChange"
            @sort-change="handleSort"
          >
            <template #status="{ row }">
              <!-- 提示：此处状态值根据具体业务来处理，此处仅做自定义列示例  -->
              <div v-if="row['status'] === '1'">正常</div>
              <div v-else-if="row['status'] === '0'" style="color: red">
                故障
              </div>
              <div v-else>-</div>
            </template>
            <!-- 通过具名传入自定义的结构，不添加的不写这个template  -->
            <template #link>
              <el-link @click="JumpMaintenanceRecords">查看完整信息>></el-link>
            </template>
          </table-common>
        </div>
      </div>
      <el-radio-group
        v-model="layer"
        :class="visible == true ? 'btn_d btnLayer' : 'btn_c btnLayer'"
      >
        <el-radio-button
          v-for="area in areaDetail"
          :label="area.buildName"
          @change="showFloor(area.floorDesc)"
        >
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>
      <el-radio-group
        v-model="subLayer"
        v-if="hasSub"
        :class="visible == true ? 'btn_d subLayer' : 'btn_c subLayer'"
      >
        <el-radio-button
          v-for="area in subLayers"
          :label="area.buildName"
          @change="switchMap(area.name)"
        >
          {{ area.buildName }}
        </el-radio-button>
      </el-radio-group>


    </transition-group>
    <div class="mapLegend_a ">
      <span>图层控制</span>
      <div v-for="layer in LayerData" :key="layer.typeId">
        {{ layer.typeName }}
        <el-switch
          v-model="layer.switch"
          class="sw"
          size="small"
          @change="switchArea"
        />
      </div>
    </div>
    <div class="mapLegend">
      <span>图例</span>
      <div>
        正常设备（有信息）
        <div
          class="legend"
          style="background: #bad4fb; border: 1px solid #2f7df1"
        />
      </div>
      <div>
        正常设备（无信息）
        <div
          class="legend"
          style="background: #f8f8f8; border: 1px solid #999999"
        />
      </div>
      <div>
        当前选中
        <div
          class="legend"
          style="background: #fbdbb0; border: 1px solid #f59f2e"
        />
      </div>
      <div>
        故障设备
        <div class="legend">
          <img
            :src="image.flashing"
            style="width: 22px; height: 22px; margin-left: 20px"
          />
        </div>
      </div>
    </div>
  </div>
  <map-control @mapLoad="mapLoadEvent"></map-control>
</template>

<script lang="ts" setup>
import FilterBar from "@/components/FilterBar/index.vue";
import { ref, reactive, nextTick, onBeforeMount } from "vue";
import TableCommon from "@/components/TableCommon/index.vue";
import { PageListType } from "@/api/eqpt/houseVisual";
import { maintenancePageList } from "@/api/eqpt/visual";
import { visualColumns } from "@/views/eqpt/visual/config/columns";
import { visualOptions } from "@/views/eqpt/visual/config/filters";
// 以下3个为地图控件相关的组件
import mapControl from "@/components/map/index.vue";
import { store } from "@/components/map/mapStore";
import { image } from "@/assets/index";
import { ElMessage } from "element-plus";
import router from "@/router";
import { areaDetail } from "@/config/config";
import { getFindTree } from "@/api/eqpt/type";
import { tentativeImage } from "./tentativeImage/index.ts";

/**
 * 约束
 */
interface ProblemType {
  eqptCode?: string;
  eqptId?: string;
}

// 用于保存机场层级
const layer = ref();
// 用于保存选择的机场子层级
const subLayer = ref();
// 用于保存机场子层级数组
const subLayers = ref([]);
// 是否显示机场子层级
const hasSub = ref(false);
const visible = ref(true);
const isHighLight = ref(false);
const rowFocusId = ref(0);
const tableData = ref<ProblemType[]>([]);
const pager = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0,
  pageCount: 1,
});
/**
 * 功能-地图加载
 */
const mapLoadEvent = () => {
  ElMessage.success("地图加载成功");
  lableLayer = store.BNMap.creatGraphicsLayer({ id: "lableLayer" });
  getData();
};
// 7-27新增用于接收弹窗组件值的ref对象
const FilterRef = ref();

// 分页
const sizeChange = (size: number) => {
  pager.pageSize = size;
  getData();
};
const currentChange = (value: number) => {
  pager.currentPage = value;
  getData();
};

/**
 * 功能-表格点击事件
 * @parms { 当前行的数据 } row
 */
const rowClick = (row) => {
  if (row.coordinate) {
    if (rowFocusId.value === row.eqptId) {
      isHighLight.value = false;
      rowFocusId.value = 0;
      store.BNWindows.hide();
      let sectorsym;
      if (lastLayer.state === "1") {
        sectorsym = store.BNSymbol.PictureMarkerSymbol(
          tentativeImage.resource1,
          22,
          22
        );
      } else {
        sectorsym = store.BNSymbol.PictureMarkerSymbol(image.flashing, 22, 22);
      }
      const getGraphicsLayer = totalGraphic.filter((item) => {
        return item.id === lastLayer.draw;
      });
      getGraphicsLayer[0].markerGraphic.symbol = sectorsym;
    } else {
      console.log(row);

      rowFocusId.value = row.eqptId;
      // // 赋值临时图层信息
      if (lastLayer.draw !== "") {
        let sectorsym;
        if (lastLayer.state === "1") {
          sectorsym = store.BNSymbol.PictureMarkerSymbol(
            tentativeImage.resource1,
            22,
            22
          );
        } else {
          sectorsym = store.BNSymbol.PictureMarkerSymbol(
            image.flashing,
            22,
            22
          );
        }
        const getGraphicsLayer = totalGraphic.filter((item) => {
          return item.id === lastLayer.draw;
        });
        getGraphicsLayer[0].markerGraphic.symbol = sectorsym;
      }
      const hightLine = store.BNSymbol.PictureMarkerSymbol(
        tentativeImage.resource3,
        22,
        22
      );
      // eslint-disable-next-line prefer-const
      const getGraphicsLayer = totalGraphic.filter((item) => {
        return item.id === row.eqptId;
      });
      getGraphicsLayer[0].markerGraphic.symbol = hightLine;
      lastLayer.draw = row.eqptId;
      lastLayer.state = row.status;
      const html =
        "<table>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>" +
        "设备编号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.eqptCode || "-") +
        "</td>" +
        "<td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>设备类型:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.typeName || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>设备型号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.eqptModel || "-") +
        "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>设备名称:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.eqptName || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用部门:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.useOrgans || "-") +
        "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>归属单位:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.ownerName || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>维护内容:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.file || "-") +
        "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>末次维护时间:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.lastMaintenanceTime || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维护执行人:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;overflow:hidden !important;white-space: nowrap;text-overflow: ellipsis;'>" +
        (row.maintainer || "-") +
        "</td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维护周期:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.maintenanceCycle || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>航站楼:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.terminal || "-") +
        "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>楼层:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
        (row.floor || "-") +
        "</td></tr>" +
        "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>位置:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        (row.position || "-") +
        "</td>                                                      <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
        ("(" + row.coordinate.longitude + "," + row.coordinate.latitude + ")" ||
          "-") +
        "</td></tr>" +
        "</table style='color: #aaa;width:80px'>";
      // 设置弹窗内容
      store.BNWindows.setTitle("设备基本信息");
      store.BNWindows.setContent(html);
      // 设置弹窗大小
      const mapPoint = store.BNMap.createPoint({
        x: row.coordinate.longitude,
        y: row.coordinate.latitude,
        spatialReference: store.BNMap.spatialReference,
      });
      if (getGraphicsLayer[0].markerGraphic.visible) {
        isHighLight.value = true;
        store.BNMap.setCenter(
          row.coordinate.longitude - 300,
          row.coordinate.latitude
        );
        store.BNWindows.show(mapPoint);
      } else {
        store.BNWindows.hide();
        ElMessage.error("该图层已隐藏");
      }
    }
  } else {
    ElMessage.error(row.eqptName + "坐标不存在");
  }
};
let lastLayer = { draw: "", state: "" };
let totalGraphic = [];
// 创建图层
let lableLayer;

/**
 * 功能-将后端传回的数据回显到地图上
 * Date: 2023-8-09
 * @parms {后端返回的地图数据} points
 */
const drawPoint = (points) => {
  const hightSymbol = store.BNSymbol.PictureMarkerSymbol(
    tentativeImage.resource3,
    22,
    22
  );
  const markerSymbol = store.BNSymbol.PictureMarkerSymbol(
    image.flashing,
    22,
    22
  );
  // 向地图添加临时图层

  if (points.coordinate) {
    // 创建点
    const point = store.BNMap.createPoint({
      x: points.coordinate.longitude,
      y: points.coordinate.latitude,
      spatialReference: store.BNMap.spatialReference,
    });
    // 创建图片
    if (points.status === "1") {
      markerSymbol = store.BNSymbol.PictureMarkerSymbol(
        tentativeImage.resource1,
        22,
        22
      );
    }
    const markerGraphic = store.BNMap.graphic(point, markerSymbol);
    markerGraphic.attributes = {
      eqptId: points.eqptId || "-",
      status: points.status || "-",
      eqptCode: points.eqptCode || "-",
      typeName: points.typeName || "-",
      eqptModel: points.eqptModel || "-",
      eqptName: points.eqptName || "-",
      useOrgans: points.useOrgans || "-",
      ownerName: points.ownerName || "-",
      file: points.file || "-",
      lastMaintenanceTime: points.lastMaintenanceTime || "-",
      maintainer: points.maintainer || "-",
      maintenanceCycle: points.maintenanceCycle || "-",
      terminal: points.terminal || "-",
      floor: points.floor || "-",
      position: points.position || "-",
      coordinate:
        "(" +
          points.coordinate.longitude +
          "," +
          points.coordinate.latitude +
          ")" || "-",
    };
    totalGraphic.push({
      id: points.eqptId,
      typeId: points.typeId,
      markerGraphic,
    });
    lableLayer.add(markerGraphic);
    // 设置图层中心点为地图中心点
    store.BNMap.bindEvent("lableLayer", "click", function (evt) {
      if (evt.clickResult != null) {
        if (lastLayer.draw !== "") {
          let sectorsym;
          const id = evt.clickResult.results[0].graphic.attributes.eqptId;
          if (lastLayer.draw !== id) {
            if (lastLayer.state === "1") {
              sectorsym = store.BNSymbol.PictureMarkerSymbol(
                tentativeImage.resource1,
                22,
                22
              );
            } else {
              sectorsym = store.BNSymbol.PictureMarkerSymbol(
                image.flashing,
                22,
                22
              );
            }
            const getGraphicsLayer = totalGraphic.filter((item) => {
              return item.id === lastLayer.draw;
            });
            getGraphicsLayer[0].markerGraphic.symbol = sectorsym;
          }
        }
        const myLayer = evt.clickResult.results[0];
        const tempGraphic = myLayer.graphic;
        // 赋值临时图层信息
        lastLayer.draw = myLayer.graphic.attributes.eqptId;
        lastLayer.state = myLayer.graphic.attributes.status;
        // 赋值临时图层信息
        tempGraphic.symbol = hightSymbol;
        const html =
          "<table>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>" +
          "设备编号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.eqptCode || "-") +
          "</td>" +
          "<td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>设备类型:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.typeName || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>设备型号:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.eqptModel || "-") +
          "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>设备名称:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.eqptName || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>使用部门:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.useOrgans || "-") +
          "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>归属单位:</td>     <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.ownerName || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>维护内容:</td>  <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.file || "-") +
          "</td>                                                         <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>末次维护时间:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.lastMaintenanceTime || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维护执行人:</td><td style='text-align:left;padding-left:15px;background-color:#F4F7FC;max-width:120px;overflow:hidden !important;white-space: nowrap;text-overflow: ellipsis;'>" +
          (tempGraphic.attributes.maintainer || "-") +
          "</td>  <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>维护周期:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.maintenanceCycle || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB'>航站楼:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.terminal || "-") +
          "</td>                                                    <td style='text-align:right;padding-right:20px;width:90px;background-color:#F3F6FB '>楼层:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#FBFCFE'>" +
          (tempGraphic.attributes.floor || "-") +
          "</td></tr>" +
          "<tr style='height:40px'><td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>位置:</td>    <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.position || "-") +
          "</td>                                                      <td style='text-align:right;padding-right:20px;width:90px;background-color:#ECF0FC'>地图坐标:</td> <td style='text-align:left;padding-left:15px;width:120px;background-color:#F4F7FC'>" +
          (tempGraphic.attributes.coordinate || "-") +
          "</td></tr>" +
          "</table style='color: #aaa;width:80px'>";
        // 设置弹窗内容
        store.BNWindows.setTitle("设备基本信息");
        store.BNWindows.setContent(html);
        // 设置弹窗大小
        store.BNWindows.show(evt.mapPoint);
      } else {
        if (totalGraphic.length != 0) {
          store.BNWindows.hide();
          if (lastLayer.state === "1") {
            sectorsym = store.BNSymbol.PictureMarkerSymbol(
              tentativeImage.resource1,
              22,
              22
            );
          } else {
            sectorsym = store.BNSymbol.PictureMarkerSymbol(
              image.flashing,
              22,
              22
            );
          }
          const getGraphicsLayer = totalGraphic.filter((item) => {
            return item.id === lastLayer.draw;
          });
          if (getGraphicsLayer.length != 0) {
            getGraphicsLayer[0].markerGraphic.symbol = sectorsym;
          }
        }
      }
    });

    store.BNMap.addGraphicsLayer(lableLayer);
  }
  // }
};
const loading = ref(false);
const LayerData = ref([]);
/**
 * 功能-向api传参，进行条件查询
 * Date: 2023-8-06
 * Author: jincongyi
 */
const getData = async () => {
  loading.value = true;
  const payload: PageListType = {
    pageNum: pager.currentPage,
    pageSize: pager.pageSize,
    condition: {},
  };
  // 传递查询的内容到api
  if (search.value.eqptCode) {
    var str = search.value.eqptCode;
    payload.condition.eqptCode = str.replace(/\s+/g, "");
  }
  if (search.value.houseType) {
    payload.condition.houseType = search.value.houseType || "";
  }
  if (search.value.eqptName) {
    var str = search.value.eqptName;
    payload.condition.eqptName = str.replace(/\s+/g, "");
  }
  lableLayer;
  if (search.value.status) {
    payload.condition.status = search.value.status || "";
  }
  if (order) {
    payload.condition.order = order || "";
  }

  // res获取查询后的数据列表
  const res = await maintenancePageList(payload);
  loading.value = false;
  await getFindTree({
    condition: {
      owners: [],
    },
    pageNum: 1,
    pageSize: 99,
  }).then((res) => {
    LayerData.value = res.data.list.map((item) => {
      return { ...item, switch: true };
    });
  });
  store.BNWindows.hide();
  lastLayer = { draw: "", state: "" };
  totalGraphic = [];
  lableLayer.removeAll();
  res.data.list.forEach((item) => {
    drawPoint(item);
  });
  // res2未加查询条件的数据列
  nextTick(() => {
    store.BNMap.addGraphicsLayer(lableLayer);
  });
  if (res) {
    tableData.value = res.data.list;
    pager.total = res.data.total;
    if (pager.total === 0) {
      pager.pageCount = 1;
    } else {
      pager.pageCount = Math.ceil(pager.total / pager.pageSize);
    }
  } else {
    loading.value = false;
    ElMessage.error("获取列表失败，请刷新重试！");
  }
};

let order: string | { column: string; method: any }[] = [];
/**
 * 功能-排序
 * Date: 2023-8-06
 * Author: jincongyi
 * @param value { order: 排序顺序; prop: table表字段名 }
 */
const handleSort = (value: { order: string; prop: string }) => {
  const sort = value.order?.slice(0, -6) || "asc";
  order = [];
  if (value.prop === "eqptCode") {
    order = [{ column: "eqptCode", method: sort }];
  } else if (value.prop === "status") {
    order = [{ column: "status", method: sort }];
  }
  FilterRef.value.order = order;
  getData();
};

/**
 * 功能-清空查询条件
 * Date: 2023-8-06
 * Author: jincongyi
 */
const reset = (data: FilterDataType) => {
  search.value = data;
  pager.currentPage = 1;
  pager.pageSize = 10;
  getData();
};

/**
 * 功能-跳转到房屋动态管理页面
 * Author: jincongyi
 */
const JumpMaintenanceRecords = () => {
  router.push("/eqpt/maintenanceRecords");
};

const showFloor = (val: string[]) => {
  if (val != undefined) {
    subLayers.value = val;
    hasSub.value = true;
  } else {
    hasSub.value = false;
  }
};
const switchMap = (name: string) => {
  store.BNMap.switchDCJ(name, (evt: any) => {
    // 一般为调用setCenter和setLevel方法
    console.log(evt);
    console.log("回调");
  });
};

const switchArea = () => {
  let sectorsym;
  isHighLight.value = false;
  if (totalGraphic.length != 0) {
    store.BNWindows.hide();
    if (lastLayer.state === "1") {
      sectorsym = store.BNSymbol.PictureMarkerSymbol(
        tentativeImage.resource1,
        22,
        22
      );
    } else {
      sectorsym = store.BNSymbol.PictureMarkerSymbol(image.flashing, 22, 22);
    }
    const getGraphicsLayer = totalGraphic.filter((item) => {
      return item.id === lastLayer.draw;
    });
    if (getGraphicsLayer.length != 0) {
      getGraphicsLayer[0].markerGraphic.symbol = sectorsym;
    }
  }
  LayerData.value.forEach((layer) => {
    let typeId = layer.typeId;
    store.BNWindows.hide();
    if (!layer.switch) {
      const targetGraphic = totalGraphic.filter((graphic) => {
        return graphic.typeId === typeId;
      });

      if (targetGraphic.length != 0) {
        targetGraphic.forEach((item) => {
          item.markerGraphic.visible = false;
        });
      }
    } else {
      const targetGraphic = totalGraphic.filter((graphic) => {
        return graphic.typeId === typeId;
      });
      if (targetGraphic.length > 0) {
        targetGraphic.forEach((item) => {
          item.markerGraphic.visible = true;
        });
      }
    }
  });
};

/*
 * 功能-查询
 * Date: 2023-8-30
 * Author: jincongyi
 * @param data 输入查询数据
 */
const search = ref({});
const findPage = (data: FilterDataType) => {
  search.value = data;
  getData();
};
</script>
<style lang="less" scoped>
.dialog {
  pointer-events: none;
}
.dialog /deep/ .el-dialog {
  pointer-events: auto;
  position: absolute;
  left: 640px;
  top: 140px;
}
</style>
<style lang="less" scoped>
/* 进入动画 */
.hello-enter-active {
  animation: move 1s;
  animation-timing-function: linear;
}
.hello-leave-active {
  animation: move 1s reverse;
  animation-timing-function: linear;
}

@keyframes move {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translate(0);
  }
}
.drawer {
  width: 600px;
  height: 830px;
  padding: 10px;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 14px;
  z-index: 999;
  background-color: #fff;
  float: left;
}

.drawerLeft {
  width: 680px;
  position: absolute;
  top: 0;
  left: 0;
}
.drawer > .title {
  line-height: 32px;
  height: 32px;
  margin-bottom: 10px;
  padding-right: 15px;
  span {
    margin-left: 5px;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    font-weight: bolder;
    border-left: #2f7df1 3px solid;
    text-indent: 1em;
  }
  .newArea {
    float: right;
  }
  .titleNumMsg {
    text-indent: 1em;
    margin-top: 10px;
    height: 20px;
    line-height: 20px;
    display: block;
    .num {
      display: inline-block;
      float: left;
      padding-right: 9px;
      span {
        text-indent: 5px;
        height: 20px;
        margin-top: -3px;
        display: inline-block;
        vertical-align: middle;
        font-size: 18px;
        line-height: 20px;
        font-weight: bolder;
        border: 0;
        color: #2f7df1;
      }
    }
    .num:not(:first-child) {
      border-left: 1px solid #ddd;
    }
  }
  p {
    height: 14px;
    line-height: 14px;
    text-indent: 1em;

    span {
      all: initial;
      color: #2f7df1;
      font-size: 20px;
      font-weight: 700;
    }
    padding-bottom: 30px;
  }
}
.dialog {
  /deep/ .el-form-item__label {
    text-align: left;
    width: 130px !important;
  }
}
.drawer > .content {
  line-height: 32px;
  height: 100px;
  margin-bottom: 20px;
  padding: 0 10px 10px;
  position: relative;
  /deep/ .el-form-item__label {
    text-align: right;
    width: 85px !important;
    padding: 0;
    margin-right: 10px;
    display: inline-block;
  }
  /deep/ .el-form-item {
    margin-bottom: 5px;
  }
  /deep/ .filter-wrapper {
    display: inline-block;
  }
  /deep/ .button-group {
    width: 200px;
    position: absolute;
    top: 123px;
    left: 465px;
  }
}
.msgList {
  padding: 10px 0 10px 10px;
  overflow-y: scroll;
  height: 580px;
}
.msgList::-webkit-scrollbar {
  display: none;
}
.listDiv {
  border: #d7d7d7 1px solid;
  border-radius: 8px;
  font-size: 14px;
  padding: 8px;
  max-height: 120px;
  overflow-y: hidden;
  margin-bottom: 10px;
  .top {
    width: 100%;
    height: 24px;
    line-height: 24px;
    vertical-align: center;
  }
  .top span {
    display: inline-block;
    height: 24px;
    line-height: 24px;
    text-indent: 5px;
    float: left;
    border: 0;
  }
  .top span img {
    margin-top: 2px;
  }
  .top span:first-child {
    font-weight: bolder;
    text-indent: 2px;
    text-align: left;
  }
  .top span:last-child {
    float: right;
    text-align: right;
  }
  .list {
    line-height: 14px;
    max-height: 60px;
    overflow-y: scroll;
  }
  .list::-webkit-scrollbar {
    display: none;
  }
}
.subLayer {
  position: absolute;
  width: 35px;
  top: 50px;
  border: 0;
}
.subLayer /deep/ .el-radio-button .el-radio-button__inner {
  width: 35px;
  border: 1px #fff solid;
  padding: 10px;
}
.subLayer /deep/ .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 6px 6px 0 0;
}
.subLayer /deep/ .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0 0 6px 6px;
}
.btnLayer {
  position: absolute;
  top: 10px;
  border: 0;
  transition: left 1s;
  transition-timing-function: linear;
}
.btn {
  width: 15px;
  height: 50px;
  position: absolute;
  top: 350px;
  border: 0;
  background-color: #fff;
  padding-left: 3px;
  padding-right: 3px;
  border-radius: 0 8px 8px 0;
  transition: left 1s;
  transition-timing-function: linear;
  object-fit: none;
}
.btn_d {
  left: 720px;
}
.btn_c {
  left: 10px;
}
.btn_b {
  left: 0;
}
.btn_a {
  left: 710px;
}

.mapLegend {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  position: absolute;
  width: 200px;
  height: 150px;
  top: 680px;
  right: 10px;
  transition: right 1s;
  font-size: 12px;

  div {
    line-height: 30px;
    .legend {
      float: right;
      align-items: center;
      border-radius: 4px;
      width: 62px;
      height: 22px;
    }
    .blue {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: #b6e5fb;
      border: 1px solid #0aaaf0;
      width: 18px;
      height: 18px;
    }
    .red {
      float: right;
      margin-right: 45px;
      margin-top: 2px;
      border-radius: 10px;
      background: red;
      width: 20px;
      height: 20px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 60px;
    margin-top: 2px;
    border-left: 2px solid #2f7df1;
    text-indent: 10px;
  }
}
.mapLegend_a {
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  position: fixed;
  bottom: 40px;
  /*min-height: 250px;*/
  width: 220px;
  height: auto;
  /*max-height: 500px;*/
  left: 970px;
  /*top: calc(64vh + 130px);*/
  /*bottom: 10px;*/
  /*overflow: hidden;*/
  overflow-y: visible;
  .sw {
    float: right;
    height: 20px;
    margin-top: 5px;
    margin-left: 30px;
  }
  div {
    line-height: 30px;
    .legend {
      float: right;
      align-items: center;
      border-radius: 4px;
      width: 100px;
      height: 22px;
    }
  }
  span {
    display: inline-block;
    height: 12px;
    line-height: 12px;
    margin-right: 2px;
  }
  span:first-child {
    font-weight: bolder;
    width: 80px;
    margin-top: 2px;
    border-left: 2px solid #2f7df1;
    text-indent: 10px;
  }
}
</style>
